// 首页初始化页面 --- 郜志豪
import React, { useEffect, useState } from 'react'
import { Sticky, Button } from 'react-vant'
import { Arrow } from '@react-vant/icons';
import { useNavigate } from 'react-router-dom';
import axios from 'axios'
axios.defaults.baseURL = 'http://127.0.0.1:3000'
export default function Home() {
  const navigate = useNavigate()
  const [list, setList] = useState([])
  useEffect(() => {
    getpatientlist()
  }, [])
  const getpatientlist = async () => {
    let { data: { data } } = await axios.get('/getpatientlist')
    setList(data)
  }
  return (
    <div style={{ backgroundColor: '#F2F2F2' }}>
      <Sticky offsetTop={40}>
        <div style={{
          backgroundColor: '#037BFE',
          width: '100%',
          height: '250px',

        }}>
          <div
            style={{ width: '90%', display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}
          >
            <svg style={{ marginTop: '10px' }} t="1724668879733" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4415" width="30" height="30"><path d="M660.48 872.448q6.144 0-3.584 15.36t-29.696 33.792-47.104 33.792-57.856 15.36q-27.648 0-53.248-15.36t-45.056-33.792-29.696-33.792-6.144-15.36l272.384 0zM914.432 785.408q7.168 9.216 6.656 17.92t-4.608 14.848-10.24 9.728-12.288 3.584l-747.52 0q-14.336 0-20.992-11.776t4.608-29.184q17.408-30.72 40.96-68.608t44.544-81.408 36.352-92.16 15.36-101.888q0-51.2 14.336-92.16t37.376-71.68 53.248-52.224 62.976-32.768q-16.384-26.624-16.384-55.296 0-41.984 28.672-70.656t70.656-28.672 70.656 28.672 28.672 70.656q0 14.336-4.096 28.16t-11.264 25.088q34.816 11.264 66.048 32.768t54.272 53.248 36.864 72.704 13.824 91.136q0 51.2 15.36 100.864t36.864 94.208 45.568 81.408 43.52 63.488zM478.208 142.336q0 16.384 11.264 28.16t27.648 11.776l2.048 0q16.384-1.024 27.648-12.288t11.264-27.648q0-17.408-11.264-28.672t-28.672-11.264-28.672 11.264-11.264 28.672z" p-id="4416" fill="#e6e6e6"></path></svg>
            <sup style={{ marginLeft: '-5px', border: '1px solid red', backgroundColor: '#F56C6C', color: 'white', borderRadius: '10px', width: '10px' }}>2</sup>

          </div>
          <div style={{ display: 'flex', justifyContent: 'space-around', width: '80%' }} >
            <img src="./8.png" alt="" style={{
              width: "100px",
              height: "100px",
              borderRadius: '50%',
            }} />
            <div style={{ display: 'flex', }}>
              <p style={{ marginRight: '10px', color: 'white' }}>张三</p>
              <p style={{ marginRight: '10px', color: 'white' }}>主任医师</p>
              <p style={{ marginRight: '10px', color: 'white' }}>内科</p>
            </div>
          </div>
          <span style={{ color: 'white', position: 'relative', left: 155, top: -33 }}>北京协和医院</span>
          <img src="./logo192.png" alt="" style={{ width: '25px', position: 'relative', left: 220, top: -60 }} />

          <div style={{ display: 'flex', justifyContent: 'space-around', width: '80%', margin: '0 auto', color: 'white' }}>
            <span>2345</span>
            <span>2345</span>
            <span>99%</span>
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-around', width: '80%', margin: '0 auto', color: 'white' }}>
            <span>患者数</span>
            <span>预约数</span>
            <span>好评率</span>
          </div>
        </div>
      </Sticky>
      <div style={{
        display: 'flex', height: '200px', justifyContent: 'space-around', background: '#FFFFFF', flexWrap: 'wrap', textAlign: 'center'
        , boxShadow: '0 0 3px #ccc', alignItems: 'center', padding: '10px'
      }}>
        <p style={{ marginRight: '20px' }} onClick={(() => { navigate('/image') })}>
          <img src="./1.png" alt="" style={{ width: '50px', borderRadius: '50%' }} />
          <br />
          <span>图文问诊</span>
        </p>
        <p style={{ marginRight: '20px' }} onClick={(() => { navigate('/tel') })}>
          <img src="./2.png" alt="" style={{ width: '50px', borderRadius: '50%' }} />
          <br />
          <span>电话问诊</span>
        </p>
        <p style={{ marginRight: '20px' }} onClick={(() => { navigate('/video') })}>
          <img src="./3.png" alt="" style={{ width: '50px', borderRadius: '50%' }} />
          <br />
          <span>视频问诊</span>
        </p>
        <p style={{ marginRight: '20px' }} onClick={(() => { navigate('/followup') })}>
          <img src="./4.png" alt="" style={{ width: '50px', borderRadius: '50%' }} />
          <br />
          <span>开药问诊</span>
        </p>
        <p style={{ marginRight: '20px' }} onClick={(() => { navigate('/Ghyy') })}>
          <img src="./5.png" alt="" style={{ width: '50px', borderRadius: '50%' }} />
          <br />
          <span>挂号预约</span>
        </p>
        <p style={{ marginRight: '20px' }} onClick={(() => { navigate('/gg') })}>
          <img src="./6.png" alt="" style={{ width: '50px', borderRadius: '50%' }} />
          <br />
          <span>快速处方</span>
        </p>
        <p style={{ marginRight: '20px' }} onClick={(() => { navigate('/Hzgl/HPage1') })}>
          <img src="./7.png" alt="" style={{ width: '50px', borderRadius: '50%' }} />
          <br />
          <span>患者管理</span>
        </p>
      </div>
      <div style={{ boxShadow: '0 0 3px #ccc', width: '100%', height: '270px', marginTop: '15px', backgroundColor: '#FFFFFF' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
          <p style={{ marginLeft: '10px', fontSize: '20px', }}>抢单区</p>
          <p style={{ marginRight: '10px', display: 'flex', alignItems: 'center', fontSize: '20px', }}>更多<Arrow onClick={() => { navigate('/hall') }} /></p>
        </div>
        <div style={{ width: '80%', height: '150px', margin: '0 auto', marginTop: '20px' }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '90%' }}>
            <img src="./10.png" alt="" />
            <span>王五</span>
            <span style={{ fontSize: '12px', color: '#9999A6' }}>男</span>
            <span style={{ fontSize: '12px', color: '#9999A6' }}>43</span>
            <button style={{ border: '0', background: '#EDF0FD' }}>极速问诊-电话</button>
            <span style={{ color: 'red' }}>￥ 39</span>
          </div>
          <p style={{ marginTop: '10px', color: '#9999A6', fontSize: '15px', lineHeight: '20px' }}>病情描述：
            <span >最近一个月总是头晕、头痛、疲劳、心悸
              等，有时还会出现注意力不集中、记忆力减退、肢体麻木的现象</span>
          </p>
        </div>
        <div style={{ borderTop: '1px solid #F8F8F8', width: '80%', margin: '0 auto', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div style={{ display: 'flex', marginTop: '15px', justifyContent: 'space-between', alignItems: 'center', width: '100%', margin: '0 auto' }}>
            <p>今天已接25单,剩余接诊量5</p>
            <Button round  onClick={()=>{navigate(`/details/${"66d12ef54bfeba3e1495ece5"}`)}}  type='info' style={{ background: '#0079FE', width: '80px', height: '33px' }}>抢单</Button>
          </div>
        </div>
      </div>
      <div style={{ boxShadow: '0 0 3px #ccc', marginTop: '15px', backgroundColor: 'white' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', borderBottom: '1px solid #cecece', hright: '50px', lineHeight: '50px' }}>
          <p style={{ marginLeft: '10px', fontSize: '20px' }}>患者消息</p>
          <p style={{ marginRight: '10px', display: 'flex', fontSize: '20px', alignItems: 'center' }}>更多<Arrow /></p>
        </div>
        {
          list.map(i => {
            return <div key={i._id}  onClick={()=>{navigate(`/messagedetails/${i._id}`)}}   style={{ borderBottom: '1px solid #cecece', height: '200px' }}>
              <div style={{ width: '90%', margin: '0 auto' }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-around' }} >
                  <img src="./10.png" alt="" />
                  <span>{i.name}</span>
                  <span style={{ fontSize: '12px', color: '#9999A6' }}>{i.sex}</span>
                  <span style={{ fontSize: '12px', color: '#9999A6' }}>{i.age}</span>
                  <button style={{ border: '0', background: '#EDF0FD', fontSize: '13px', padding: '10px' }}>{i.wid.way}</button>
                  <span style={{ color: 'red' }}>{i.sid.name}</span>
                </div>
                <p style={{ margin: '0 auto', marginTop: '10px', marginLeft: '10px', color: '#9999A6', fontSize: '15px', lineHeight: '20px' }}>病情描述：
                  <span style={{ marginLeft: '10px' }} >{i.content}</span>
                </p>
              </div>
              <p style={{ margin: '0 auto', marginTop: '10px', marginLeft: '30px', lineHeight: '20px' }}>预约时间: {i.date} 周四 {i.start_time}--{i.end_time}</p>
              <p style={{ color: '9999A6', display: 'flex', justifyContent: 'flex-end', marginRight: '20px' }}>20分钟前</p>
            </div>
          })
        }
      </div>
    </div>
  )
}
 